<!-- 消息列表 麦沃德科技暴雨 -->
<template>
	<view class="container">
		<view class="container-main" v-if="isLoad">
			<view class="main-item" v-for="item in messageList" :key="item.id"  @click="toDetail(item.order_post_id)">
				<view class="item-title">{{ item.title }}</view>
				<view class="item-box">
					<view class="item-box-title">订单编号</view>
					<view class="item-box-txt">{{ item.order_no }}</view>
				</view>
				<view class="item-box">
					<view class="item-box-title">订单信息</view>
					<view class="item-box-txt">{{ item.name }}</view>
				</view>
				<view class="item-box">
					<view class="item-box-title">接单人员</view>
					<view class="item-box-txt">{{ item.order_recipient }}</view>
				</view>
				<view class="item-box">
					<view class="item-box-title">联系电话</view>
					<view class="item-box-txt" style="flex: 1;">{{ item.phone }}</view>
					<view class="item-box-call" @click.stop="call(item.phone)">电话联系</view>
				</view>
				<view class="item-box">
					<view class="item-box-title">接单时间</view>
					<view class="item-box-txt">{{ item.createtime }}</view>
				</view>
				<view class="item-divider"></view>
				<view class="item-button">
					<view class="item-button-txt">查看订单详情</view>
					<image src="/static/forum/back1.png" class="item-button-img"></image>
				</view>
			</view>
			<view class="empty" v-if="messageList.length == 0">
				<image src="/static/empty.png" mode="widthFix" style="width: 150rpx;height: 150rpx;"></image>
				暂无消息~
			</view>
		</view>
	</view>
</template>

<script>
	var app = getApp();
	import ikz from '@/pages/Common/tools.js';
	export default {
		data() {
			return {
				isLoad:false, 
				type:0,
				messageList:[]
			};
		},
		onLoad(option) {
			uni.showLoading({
				title:"加载中"
			})
			this.type = option.type
			this.getMessage()
		},
		methods: {
			// 获取消息列表
			getMessage() {
				var path = '/xyb/message/index';
				var data = {
					token: uni.getStorageSync('local_user_session'),
					app_plat: "MP-WEIXIN",
					type:this.type
				};
				ikz.get(path, data, res => {
					if (res.data.code) {
						this.messageList = res.data.data.data
						console.log("值是", res.data.data);
					}
					uni.hideLoading()
					this.isLoad = true
				});
			},
			toDetail(id){
				if(this.type == 1){
					uni.navigateTo({
						url:"/pages/Component/Module/Campus/Program/Order/myorderdetail/index?id=" + id
					})
				}else if(this.type == 2){
					uni.navigateTo({
						url:"/pages/Component/supermarket/Program/order/details?id=" + id
					})
				}
				
			},
			call(phone){
				uni.makePhoneCall({
				   phoneNumber: phone
				});
			}
		}
	}
</script>

<style lang="scss">
	body{
		background: #F3F3F3;
	}
	.container{
		.container-main{
			padding:0 32rpx 32rpx;
			
			.main-item{
				padding: 32rpx;
				margin-top: 32rpx;
				border-radius: 16rpx;
				background: #FFFFFF;
				
				.item-title{
					font-size: 28rpx;
					font-weight: 600;
					color: #333333;
				}
				.item-box{
					display: flex;
					align-items: center;
					padding-top: 16rpx;
					
					.item-box-title{
						font-size: 24rpx;
						color: #999999;
					}
					.item-box-txt{
						padding-left: 32rpx;
						font-size: 24rpx;
						color: #999999;
					}
					.item-box-call{
						font-size: 24rpx;
						color: #FB7A26;
					}
				}
				.item-divider{
					margin: 32rpx -32rpx 0;
					border:  2rpx solid #F1F1F1;
				}
				.item-button{
					display: flex;
					align-items: center;
					padding-top: 28rpx;
					
					.item-button-txt{
						flex: 1;
						font-size: 28rpx;
						line-height: 40rpx;
						color: #333333;
					}
					.item-button-img{
						width: 40rpx;
						height: 40rpx;
					}
				}
			}
			.empty {
				display: flex;
				flex-direction: column;
				align-items: center;
				color: #999999;
				margin-top: 46%;
				image {
					margin: 50rpx 0 20rpx;
					width: 30%;
				}
			}
		}
	}
</style>
